<template>
  <div class="component-quick-search">
    <ButtonGroup>
      <Button v-for="item in searchConfig"
              @click="itemClick(item)"
              :type="item.id === current ? 'primary' : 'default'"
              :ghost="item.id === current"
              :key="item.id">{{ item.name }}
      </Button>
    </ButtonGroup>
  </div>
</template>

<script>
  import {mapState} from 'vuex'

  export default {
    name: "QuickSearch",
    data() {
      return {
        current: false,
        searchConfig: [
          {
            id: 12,
            name: '管理员'
          },
          {
            id: 14,
            name: '待审核'
          },
          {
            id: 18,
            name: '申请注销'
          }
        ]
      }
    },
    watch:{
      channel:{
        deep:true,
        handler:(data) => {
          if(data.name === 'quickSearch' && Number(data.data) !== this.searchConfig.length){
            this.init()
          }
        }
      }
    },
    methods:{
      itemClick(item){
        this.current = item.id
      },
      init(){

      }
    },
    computed:{
      ...mapState('manage',[
        'channel'
      ])
    }
  }
</script>

<style scoped>

</style>